<template>
  <div class="feedback">
    <!-- 意见反馈 -->

    <!-- 意见 -->
    <div class="feedbacktitle">问题和意见</div>
    <div class="textareapor">
      <textarea
        cols="30"
        rows="5"
        placeholder="请输入您要反馈的意见"
        placeholder-style="color:#C1C1C7;"
        maxlength="128"
        @input="onKeyTextarea"
        :value="textarea"
      >
      </textarea>
      <div class="textareafonzi">128字</div>
    </div>
    <!-- 图片 -->
    <div class="feedbacktitle">图片</div>
    <div class="picture">
      <div @tap="chooseImg1()">
        <div v-if="imageFile1 == ''">
          <p class="tup">+</p>
        </div>
        <div v-else>
          <img class="tup" :src="imageFile1" />
        </div>
      </div>
    </div>

    <!-- 联系方式 -->
    <div class="feedbacktitle">联系方式</div>
    <div class="feedbackinput">
      <input
        @input="onKeyInput"
        type="number"
        placeholder="请输入你的联系方式"
        placeholder-style="color:#C1C1C7"
        :value="input"
      />
    </div>

    <!-- 确定but -->
    <div class="feedbackBut" @tap="onfeed()">确定提交</div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      input: '',
      textarea: '',
      imageFile1: ''
    };
  },
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    /** 上传照片 */
    chooseImg1: function () {
      var that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          var tempFilePaths = res.tempFilePaths
          // that.setData({
          //   tempFilePaths: res.tempFilePaths
          // })s
          // that.globalData.tempFilePaths = res.tempFilePaths
          // console.log(res.tempFilePaths)
          wx.setStorage({ 
            key: "card", 
            data: tempFilePaths[0] 
          })
          that.formSubmit1()
        }
      })
    },
    formSubmit1: function (e) {
      var that = this
      var card = wx.getStorageSync('card')
      // console.log(card)
      wx.uploadFile({
        url: that.baseUrl + '/api/upload/file',
        filePath: card,
        name: 'file',
        formData: {
        },
        success: function (res) {
          // console.log(res)
          card = JSON.parse(res.data)
          // console.log(JSON.parse(res.data))
          if(card.status == 200){
            that.imageFile1 = card.data.url
            // console.log(card.data.url)
          } else {
            return false
          }
        }
      })
    },
    onKeyInput: function(event) {
      this.input = event.target.value
    },
    onKeyTextarea: function(event) {
      this.textarea = event.target.value
    },
    onfeed() {
      if (!this.textarea.trim()) {
        wx.showToast({
          title: "请输入投诉内容",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (!this.input.trim()) {
        wx.showToast({
          title: "请输入联系方式",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      if (!/^1[3456789]\d{9}$/.test(this.input)) {
        wx.showToast({
          title: "请输入正确的联系方式",
          icon: "none",
          duration: 2000,
        });
        return false;
      }
      this.request({
        url: this.baseUrl + "/api/wechatapp/propose",
        data: {
          // openid: wx.getStorageSync("openid"),
          content: this.textarea, // 投诉内容
          mobile: this.input, // 手机号
          image: this.imageFile1  //图片
        },
        method: "GET",
      })
      .then((result) => {
        console.log(result);
        if (result.status == 200) {
          wx.showToast({
            icon: "success",
            title: "投诉提交成功！",
            duration: 1000,
            success: function () {
            },
          });
          this.textarea = ''
          this.input = ''
          this.imageFile1 = ''
        } else {
          wx.showToast({
            title: result.msg,
            icon: "none",
          });
        }
      })
    },
  },
  components: {},
};
</script>

<style scoped >
.feedbacktitle {
  padding: 20rpx;
}
.textareapor {
  position: relative;
  background: #ffffff;
  padding: 20rpx;
  margin: 0 20rpx;
}
.textareafonzi {
  position: absolute;
  right: 10rpx;
  bottom: 10rpx;
  font-size: 20rpx;
  z-index: 10;
  color: #c1c1c7;
}
.picture {
  background: #ffffff;
  margin: 0 20rpx;
  padding: 2rpx 0;
}
/* .picture img {
  width: 90rpx;
  height: 90rpx;
  background: blue;
  margin: 30rpx;
} */
.feedbackinput {
  margin: 0 20rpx;
  background: #ffffff;
  padding: 20rpx;
}
.feedbackBut {
  padding: 20rpx 0;
  text-align: center;
  background: #1677ff;
  color: #ffffff;
  margin: 60rpx 40rpx;
  border-radius: 10rpx;
}
.tup {
  width: 144rpx;
  height: 144rpx;
  line-height: 128rpx;
  text-align: center;
  border: 2rpx solid #cccccc;
  font-size: 121rpx;
  color: #cccccc;
  margin: 20rpx;
}
</style>
